<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>PigDialog测试</title>
  <script type="text/javascript" src="../src/jquery.min.js"></script>
  <script type="text/javascript" src="../src/pig-dialog.js"></script>
  <link type="text/css" href="../src/pig-dialog.css" rel="stylesheet"/>

  <style type="text/css">
    *{margin : 0; padding : 0;}
    body{background-color : #f2f2f2; font-family : "Microsoft YaHei","SimSun",serif; font-size : 16px;}
    h1{margin:16px 0;font-size : 28px; font-weight : bold; text-align : center;}
    h3{font-size : 16px; font-weight : bold;} 
    ul{list-style : none;}
    .examples{width : 1100px; margin : 0 auto 26px auto; padding : 20px 30px; background-color: #fff;}
    .examples li{margin-bottom : 36px;}
    pre{
      border-left : 8px solid #666;
      padding : 16px 20px;
      line-height : 24px;
      background-color : #c1c1c1;
    }
  </style>
</head>
<body>
<h1>PigDialog API 示例</h1>
<ul class="examples">
  <li>
    <h3>简单文本调用</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "simple_text",
  html:"大家好，这是段普通的文本"
}).open();
    </pre>
    <button onclick="simple_text_dialog()">简单文字调用</button>
  </li>
  <li>
    <h3>html内容调用</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "html_text",
  html:"&lt;h2 style='font-weight : bold;'&gt;大家好!&lt;/h3&gt;&lt;p style='color : green; font-size : 12px;'&gt;这是一段HTML的文本&lt;/p&gt;"
}).open();
    </pre>
    <button onclick="html_text_dialog()">HTML内容调用</button>
  </li>
  <li>
    <h3>在左下角显示</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "left-bottom-corner",
  position : "left-bottom-corner",
  html:"大家好，我在左下角显示^_^"
}).open();
    </pre>
    <button onclick="left_corner_dialog()">在左下角显示</button>
  </li>
  <li>
    <h3>在右下角显示</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "left-bottom-corner",
  position : "left-bottom-corner",
  html:"大家好，我在右下角显示^_^"
}).open();
    </pre>
    <button onclick="right_corner_dialog()">在右下角显示</button>
  </li>
  <li>
    <h3>指定坐标显示</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "custom_coordinate",
  coordinate : {left : 120, top : 200},
  html:"大家好，我的坐标是{left : 120,top : 200}"
}).open();
    </pre>
    <button onclick="custom_coordinate_dialog()">指定坐标显示</button>
  </li>
  <li>
    <h3>模态对话框</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "modal_dialog",
  html:"这是一个模态对话框!",
  is_modal : true
}).open();
    </pre>
    <button onclick="modal_dialog()">模态对话框</button>
  </li>
  <li>
    <h3>关闭回调函数</h3>
    <pre>
$.PigDialog.new({
  dialog_id : "close_callback",
  close_callback : function(){alert("我要被关掉了哈")}
  html:"对话框关闭回调函数测试"
}).open();
    </pre>
    <button onclick="close_callback_dialog()">关闭回调函数</button>
  </li>
</ul>
</body>
<script type="text/javascript">
  function dom_dialog() {
    $("#content").PigDialog().open();
  }
  function simple_text_dialog() {
    $.PigDialog.new({
      dialog_id : "simple_text",
      html:"这是一段普通的文字"
    }).open();
  }
function html_text_dialog() {
    $.PigDialog.new({
      dialog_id : "html_text",
      html:"<h2 style='font-weight : bold;'>大家好!</h3><p style='color : green; font-size : 12px;'>这是一段HTML的文本</p>"
    }).open();
  }
  function left_corner_dialog() {
    $.PigDialog.new({
      dialog_id : "left-bottom-corner",
      position : "left-bottom-corner",
      html:"大家好，我在左下显示^_^"
    }).open();
  }
  function right_corner_dialog() {
    $.PigDialog.new({
      dialog_id : "right-bottom-corner",
      position : "right-bottom-corner",
      html:"大家好，我在右下显示^_^"
    }).open();
  }
  function custom_coordinate_dialog() {
    $.PigDialog.new({
      dialog_id : "custom_coordinate",
      coordinate : {left : 120, top : 200},
      html:"大家好，我的坐标是{left : 120,top : 200}"
    }).open();
  }
  function modal_dialog() {
    $.PigDialog.new({
      dialog_id : "modal_dialog",
      html:"这是一个模态对话框!",
      is_modal : true
    }).open();
  }
  function close_callback_dialog() {
    $.PigDialog.new({
      dialog_id : "close_callback",
      close_callback : function(){alert("我要被关掉了哈");},
      html:"对话框关闭回调函数测试"
    }).open();
  }
</script>
